/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/founders/page.tsx
 * Description: Founders page — profiles of Simon-Pierre Boucher and Massamba Mbaye
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.founders.title }, description: meta.founders.description };
}

function FounderCard({
  name,
  role,
  bio,
  tags,
  initials,
}: {
  name: string;
  role: string;
  bio: string;
  tags: string[];
  initials: string;
}) {
  return (
    <article className="rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10">
      <div className="flex items-center gap-5">
        <span
          aria-hidden="true"
          className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-ink font-mono text-lg font-semibold text-paper"
        >
          {initials}
        </span>
        <div>
          <h2 className="font-display text-2xl font-semibold text-ink">{name}</h2>
          <p className="mt-1 text-sm font-medium text-accent">{role}</p>
        </div>
      </div>
      <p className="mt-6 leading-relaxed text-ink-soft">{bio}</p>
      <ul className="mt-6 flex flex-wrap gap-2">
        {tags.map((tag) => (
          <li
            key={tag}
            className="rounded-full bg-accent-soft px-3 py-1 text-xs font-medium text-accent-strong"
          >
            {tag}
          </li>
        ))}
      </ul>
    </article>
  );
}

export default async function FoundersPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { founders } = getMessages(locale as Locale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={founders.title} lead={founders.lead} />
        </Container>
      </section>

      <section className="py-20 sm:py-24">
        <Container className="grid gap-8 lg:grid-cols-2">
          <FounderCard
            name={founders.spb.name}
            role={founders.spb.role}
            bio={founders.spb.bio}
            tags={founders.spb.tags}
            initials="SPB"
          />
          <FounderCard
            name={founders.mm.name}
            role={founders.mm.role}
            bio={founders.mm.bio}
            tags={founders.mm.tags}
            initials="MM"
          />
        </Container>
      </section>
    </>
  );
}